<template>
  <div>
    <el-card shadow="never">
      <h3>类别管理</h3>
      <div>
        <el-button type="success" @click="addBtn">添加类别</el-button>
      </div>
    </el-card>
    <br>

    <data-table :table-data="tableData">
      <el-table-column
        label="编号"
        align="center"
        fixed=""
        width="80"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="名称"
        align="center"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" size="mini" style="width:200px;" />
          <el-button size="mini" @click="updateBtn(scope.row)">更新</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="#"
        align="center"
        width="200px"
      >
        <template slot-scope="scope">
          <el-button type="danger" size="mini" plain @click="delBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </data-table>

    <!-- 添加类别模态框 -->
    <el-dialog title="添加类别" :visible.sync="addVisible" width="50%">
      <el-form size="mini" label-width="80px">

        <el-form-item label="名称">
          <el-input v-model="addForm.name" placeholder="请输入类别名称" clearable />
        </el-form-item>

        <el-form-item>
          <el-button size="mini" type="primary" plain @click="confirmAddBtn">添加</el-button>
          <el-button size="mini" plain @click="addVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import * as typeApi from '@/api/type'
import * as userApi from '@/api/user'
import DataTable from '@/components/DataTable'
export default {
  name: '',
  components: {
    DataTable
  },
  data() {
    return {
      tableData: [],
      addVisible: false,
      addForm: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      typeApi.list().then(res => {
        this.tableData = res.data
      })
    },
    addBtn() {
      this.addForm = {}
      this.addVisible = true
    },
    confirmAddBtn() {
      typeApi.add(this.addForm).then(resp => {
        this.addVisible = false
        this.getData()
        this.$notifySuccess('添加成功')
      })
    },
    updateBtn(row) {
      typeApi.update(row).then(resp => {
        this.$notifySuccess('更新成功')
        this.getData()
      })
    },
    delBtn(row) {
      this.$confirm('确定删除该类别吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        typeApi.del(row.id).then(resp => {
          this.$notifySuccess('删除成功')
          this.getData()
        })
      }).catch(() => {
        this.$notifyError('取消删除')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

